开发准备
- 注册七牛云的账号，
- 获得ACCESS_KEY、SECRET_KEY
- 创建自己的存储空间，记录空间名(bucketname)、存储区域。
上传图片
一、需要后端根据ACCESS_KEY、SECRET_KEY 在服务器生成一个upToken给到前端
二、前端部分
- index.js
- qiniuUploader文件地址：https://github.com/gpake/qiniu-wxapp-sdk/blob/master/demo/qiniu-demo/utils/qiniuUploader.js
const qiniuUploader = require("../../utils/qiniuUploader");//index.js// 初始化七牛相关参数function initQiniu() { var options = { region: 'NCN', // 华北区 uptokenURL: 'https://[yourserver.com]/api/uptoken', //请求后端uptoken的url地址 //uptoken: 'xxx', //你请求后端的uptoken,和上面一样的，uptokenURL不填就找uptoken,填一个就可以了（这里是字符串数据不是url了） domain: 'http://[yourBucketId].bkt.clouddn.com', //yourBucketId:这个去你域名配置那里要 shouldUseQiniuFileName: false, //key: '' }; qiniuUploader.init(options);}//获取应用实例var app = getApp()Page({ data: { imageObject: {} }, //事件处理函数 onLoad: function () { console.log('onLoad') var that = this; }, didPressChooesImage: function() { var that = this; didPressChooesImage(that); }, didCancelTask: function() { this.data.cancelTask() }});function didPressChooesImage(that) { initQiniu(); // 微信 API 选文件 wx.chooseImage({ count: 1, success: function (res) { var filePath = res.tempFilePaths[0]; // 交给七牛上传 qiniuUploader.upload(filePath, (res) => { that.setData({ 'imageObject': res }); }, (error) => { console.error('error: ' + JSON.stringify(error)); }, null,// 可以使用上述参数，或者使用 null 作为参数占位符 (progress) => { console.log('上传进度', progress.progress) console.log('已经上传的数据长度', progress.totalBytesSent) console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend) }, cancelTask => that.setData({cancelTask}) ); } })} 上面代码初始化七牛更多相关参数
- imageArray：准备上传的图片临时地址数组。
- fileHead：自定义上传七牛文件名的头，为了区别上传文件，比如图片/视频/录音/其他，
- imgName：自定义上传七牛文件名，前端处理嘛，我就简单的通过截取临时路径（filePath ）的30-50位字符作为储存到七牛的文件名，即使你添加了两张相同的图片，小程序给你的临时路径也是不一样的，所以不会存在重名情况。
- domain：下载资源时用到。如果设置，在上传后的success里返回的res.ImageURL字段,是一个带http的直接可以访问的文件地址，否则需要自己拼接。
- key：最终储存到七牛的文件名，我这里的图片文件名=文件头(fileHead)+伪文件名(imgName)
- uploadURL：上传到七牛的那个存储区域，上传区域和上传区域代码一定要对应上。
- region：上传区域代码。
- shouldUseQiniuFileName:表示是否由七牛来定义上传文件名，如果是 true，则文件 key 由 qiniu 服务器分配 (全局去重)。默认是 false，也就是我们自己来定义。如果key设置了，优先级最高
- index.wxml
hash: { {imageObject.hash}}\n\n key:{ {imageObject.key}}\n\n imageURL:{ {imageObject.imageURL}}
- index.css
/**index.wxss**/text { word-break: break-all; }.main { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 100rpx 0; box-sizing: border-box;}.image-container { background-color: #f2f2f2}.data { margin: 5px;}
- 还有记得去小程序后台配置上传地址白名单（对应你选的存储区域，例如华北区，https://up-z1.qbox.me）
下载社区SDK，
- 这个是微信小程序前端demo ；
- ，这个是社区的链接。